<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.proType" placeholder="请选择生产类型" clearable style="width: 150px" class="filter-item">
        <el-option v-for="item in proTypeSelectOptions" :key="item.codeValue" :label="item.name" :value="item.codeValue" />
      </el-select>
      <el-input
        v-model="listQuery.batchNo"
        placeholder="请输入批次号"
        style="width: 150px;"
        class="filter-item"
      />
      <el-input
        v-model="listQuery.materialNo"
        placeholder="请输入物料号"
        style="width: 150px;"
        class="filter-item"
      />
      <el-select v-model="listQuery.lineNo" placeholder="请选择生产线" clearable style="width: 150px" class="filter-item">
        <el-option v-for="item in lineSelectOptions" :key="item.lineNo" :label="item.name" :value="item.lineNo" />
      </el-select>
      <el-input
        v-model="listQuery.year"
        type="number"
        placeholder="请输入年份"
        style="width: 150px;"
        class="filter-item"
      />
      <el-input
        v-model="listQuery.month"
        type="number"
        placeholder="请输入月份"
        style="width: 150px;"
        class="filter-item"
      />
      <el-input
        v-model="listQuery.week"
        type="number"
        placeholder="请输入周"
        style="width: 150px;"
        class="filter-item"
      />
      <el-select v-model="listQuery.isBreak" placeholder="请选择状态" clearable style="width: 150px" class="filter-item">
        <el-option v-for="item in breakSelectOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-radio-group v-model="listQuery.isMinutia">
        <el-radio :label="isDetail">明细</el-radio>
        <el-radio :label="isCount">汇总</el-radio>
      </el-radio-group>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves class="filter-item" type="info" icon="el-icon-refresh" @click="handleReset">
        重置
      </el-button>
    </div>
    <el-table
      v-if="ifIsMinutia"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="年" prop="year" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.year }}</span>
        </template>
      </el-table-column>
      <el-table-column label="月" prop="month" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.month }}</span>
        </template>
      </el-table-column>
      <el-table-column label="周" prop="week" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.week }}</span>
        </template>
      </el-table-column>
      <el-table-column label="生产类型" prop="proType" align="center">
        <template slot-scope="scope">
          <span>{{ findNameByKey(proTypeSelectOptions, scope.row.proType, 'codeValue', 'name') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="批次号" prop="batchNo" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.batchNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="生产线" prop="lineNo" align="center">
        <template slot-scope="scope">
          <span>{{ findNameByKey(lineSelectOptions, scope.row.lineNo, 'lineNo', 'name') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="整车物料号" prop="materialNo" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.materialNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="白车身物料号" prop="bsMaterialNo" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.bsMaterialNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="油漆车身物料号" prop="psMaterialNo" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.psMaterialNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="生产订单号" prop="orderNo" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.orderNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" prop="orderStatus" align="center">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.orderStatus | statusFilter }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-else
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="年" prop="year" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.year }}</span>
        </template>
      </el-table-column>
      <el-table-column label="月" prop="month" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.month }}</span>
        </template>
      </el-table-column>
      <el-table-column label="周" prop="week" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.week }}</span>
        </template>
      </el-table-column>
      <el-table-column label="生产类型" prop="proType" align="center">
        <template slot-scope="scope">
          <span>{{ findNameByKey(proTypeSelectOptions, scope.row.proType, 'codeValue', 'name') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="批次号" prop="batchNo" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.batchNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="生产线" prop="lineNo" align="center">
        <template slot-scope="scope">
          <span>{{ findNameByKey(lineSelectOptions, scope.row.lineNo, 'lineNo', 'name') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" prop="isBreak" align="center">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.isBreak | breakStatusFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="整车物料号" prop="materialNo" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.materialNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="白车身物料号" prop="bsMaterialNo" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.bsMaterialNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="油漆车身物料号" prop="psMaterialNo" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.psMaterialNo }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>
<script>
import { fetchList, fetchStatusList, fetchLineList } from '@/api/bdc/plan-query'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import underscore from 'underscore'
// 过滤器使用组件中的变量
let that;
export default {
  name: 'PlanQuery',
  directives: { waves },
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const item = that.orderStatusList.find(a => Number(a.codeValue) === status)
      return item ? item.name : '';
    },
    breakStatusFilter(status) {
      const item = that.breakSelectOptions.find(a => a.key === status)
      return item ? item.label : '';
    }
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        proType: undefined,
        batchNo: undefined,
        materialNo: undefined,
        lineNo: undefined,
        year: undefined,
        month: undefined,
        week: undefined,
        isBreak: undefined,
        isMinutia: true
      },
      proTypeSelectOptions: [],
      lineSelectOptions: [],
      breakSelectOptions: [],
      // 明细，汇总
      isCount: false,
      isDetail: true,
      // 表格显示
      ifIsMinutia: true,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,
      orderStatusList: []
    }
  },
  beforeCreate: function () {
    // 过滤器使用组件中的变量
    that = this;
  },
  created() {
    // 获取下拉框数据及配置数据
    fetchStatusList('Key_Product_Type').then(res => {
      if (res.code == 200) {
        this.proTypeSelectOptions = res.data
      } else {
        this.$message.error('服务器内部错误！');
      }
    })
    fetchLineList().then(res => {
      if (res.code == 200) {
        this.lineSelectOptions = res.data
      } else {
        this.$message.error('服务器内部错误！');
      }
    })
    this.breakSelectOptions = [
      { key: "0", label: "已分解" },
      { key: "1", label: "未分解" }
    ],
    fetchStatusList('Key_Order_Status').then(res => {
      if (res.code == 200) {
        this.orderStatusList = res.data
        console.log('this.orderStatusList', this.orderStatusList)
      } else {
        this.$message.error('服务器内部错误！');
      }
    })
  },
  methods: {
    // 根据key值匹配数组中的数据，返回对应的name
    findNameByKey(list, key, keyCode, nameCode) {
      const ele = list.find(a => a[keyCode] === key)
      return ele ? ele[nameCode] : ''
    },
    getList() {
      this.listLoading = true
      this.ifIsMinutia = this.listQuery.isMinutia
      // 格式化数据
      let month
      if(this.listQuery.month && this.listQuery.month !== '') {
        month = this.listQuery.month.toString()
        if (month.length === 1) month = '0' + month
      }
      let week
      if(this.listQuery.week && this.listQuery.week !== '') {
        week = this.listQuery.week.toString()
        if (week.length === 1) week = '0' + week
      }
      const data = underscore.clone(this.listQuery)
      data.month = month
      data.week = week
      // 注意对于可清空的select，清空后select的值是‘’（空），不是null值，所以要加判断
      // if(data.proType === '') data.proType = undefined
      // if(data.lineNo === '') data.lineNo = undefined
      // if(data.proType === '') data.proType = undefined
      // console.log('data', data)
      fetchList(data).then(res => {
        if (res.code == 200) {
          this.list = res.data.list
          this.total = res.data.total
          console.log('res.data', res.data)
        } else {
          this.$message.error('服务器内部错误！');
        }
        this.listLoading = false
      })
    },
    // 查询
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.listQuery = {
        page: 1,
        limit: 20,
        proType: undefined,
        batchNo: undefined,
        materialNo: undefined,
        lineNo: undefined,
        year: undefined,
        month: undefined,
        week: undefined,
        isBreak: undefined,
        isMinutia: true
      }
    },
  }
}
</script>